<template>
  <div>
    <a-checkbox v-model:checked="checked">Checkbox</a-checkbox>
  </div>

  <div>
    <a-checkbox
      v-model:checked="state.checkAll"
      :indeterminate="state.indeterminate"
      @change="onCheckAllChange"
      disabled
    >
      Check all
    </a-checkbox>
  </div>
  <a-divider />
  <a-checkbox-group
    v-model:value="state.checkedList"
    :options="plainOptions"
    @change="onChange"
  />
  <hr />
  <a-checkbox-group
    v-model:value="state.value1"
    name="checkboxgroup"
    :options="plainOptions"
  >
    <template #label="{ label }">
      <span style="color: red">{{ label }}</span>
    </template>
  </a-checkbox-group>
  <a-checkbox-group v-model:value="value11" style="width: 100%">
    <a-row>
      <a-col :span="8">
        <a-checkbox value="A">A</a-checkbox>
      </a-col>
      <a-col :span="8">
        <a-checkbox value="B">B</a-checkbox>
      </a-col>
      <a-col :span="8">
        <a-checkbox value="C">C</a-checkbox>
      </a-col>
      <a-col :span="8">
        <a-checkbox value="D">D</a-checkbox>
      </a-col>
      <a-col :span="8">
        <a-checkbox value="E">E</a-checkbox>
      </a-col>
    </a-row>
  </a-checkbox-group>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      checked: true,
      state: {
        indeterminate: true,
        checkAll: false,
        checkedList: ['Apple', 'Orange'],
      },
      plainOptions: [
        'Apple', 'Pear', 'Orange'
      ],
      value11:[]
    }
  },

  created() { },
  mounted() { },
  methods: {
    onCheckAllChange(e) {
      Object.assign(this.state, {
        checkedList: e.target.checked ? this.plainOptions : [],
        indeterminate: false,
      });
    },
    onChange(checkedList) {
      this.state.indeterminate = !!checkedList.length && checkedList.length < this.plainOptions.length;
      this.state.checkAll = checkedList.length === this.plainOptions.length;
    },
  },
  computed: {}
}
</script>
<style scoped lang='scss'>
</style>
